<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			#photo{
				position: absolute;
				left: 0;
				top: 0;
			}
			body{
				background-color: #000;
				
			}
			#box{
				border: red 1px solid;
				margin: 100px auto;
				width: 700px;
				height: 400px;
				position: relative;
				overflow: hidden;
			}
		
			#bottom{
				height:50%;
				width:100%;
				position: absolute;
				/*background-color: #0000FF;*/
				left: 0;
				bottom: 0;
				cursor: pointer;
			}
			#top{
				/*background-color: red;*/
				height: 50%;
				width:100%;
				left: 0;
				position: absolute;
				cursor: pointer;
				top: 0;
				
			}
		</style>
	</head>
	<body>
		<div id="box">
	         <img src="image/timg.jpg" id="photo" />
			<span id="top"></span>
			<span id="bottom"></span>
		</div>
		<script>
			window.onload = function(){
				var box = document.getElementById("box");
				var photo = document.getElementById("photo");
				var top = document.getElementById("top");
				var bottom = document.getElementById("bottom");
				
				var timer = null, time = 0;
				//寻找鼠标
				
				//上
				
					top.onmouseover = function(){
						
					clearInterval(timer);
						
						
					timer = setInterval(function(){
						
						time -= 10;
	
						if(time >=-2440){
							photo.style.top = time +'px';
						}
						else{
							clearInterval(timer);
						}
					},20);
					
					};
					
					
					//下
					bottom.onmouseover = function(){
						
						clearInterval(timer);
						
					timer = setInterval(function(){
						
						time += 10;
						if(time <=0){
							photo.style.top = time +'px';
						}
						else{
							clearInterval(timer);
						}
					}, 20);
					
					};
				
       box.onmouseout = function () {
            // 清除定时器
            clearInterval(timer);
        }
			}
		</script>
	</body>
</html>
